<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <!-- 商品列表区域 -->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner" v-for="item in car.carGoods" :key="item.id">
                        <mt-switch 
                        v-model="item.selected"
                        @change="selectedChanged(item.commodityId,item.selected)"></mt-switch>
                        <img :src="'http://'+item.pictureUrl">
                        <div class="info">
                            <h1>{{ item.title}}</h1>
                            <p>
                                <span class="price">￥{{ item.amount }}</span>
                                <numbox :initcount="item.commodityQuantity" :commodityId="item.commodityId"></numbox>
                                <a @click="removeGoods(item.commodityId)">删除{{ }}</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 结算区域 -->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner jiesuan">
                        <div class="left">
                            <p>总计(不含运费)</p>
                            <p>已勾选商品<span class="red">{{ this.$store.state.count }}</span>件，总价￥<span class="red">{{this.$store.state.amount}}</span></p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        
        </div>

    </div>
</template>

<script>
    import numbox from '../subocomponents/shopcar_numbox.vue';
    import {
        Toast
    } from 'mint-ui';
    export default {
        data() {
            return {
                userId: this.$store.state.userId,
                car: {},
                shopCar: this.$store.state.car.carGoods,
                amount: this.$store.state.car.amount,
                count: this.$store.state.count
            }
        },
        created() {
            this.getCar();
        },
        methods: {
            getCar() {
                this.$http.get("front/car/" + this.userId).then(result => {
                    if (result.body.code === 1) {
                        this.car = result.body.data;
                        this.$store.commit('saveCar',result.body.data);
                        this.$store.commit('setAllCount');
                        this.$store.commit('setAllAmount');
                    }else{
                        Toast('与服务器断开连接')
                    }
                });
            },
            removeGoods(commodityId) {
                this.$http.get("front/car/" + this.userId + "/goods/" + commodityId).then(result => {
                    if (result.body.code === 1) {
                        Toast('删除成功');
                        this.$store.commit('removeGoods',commodityId);
                    }else{
                        Toast('与服务器断开连接')
                    }
                })
            },
            selectedChanged(commodityId,selected){
                // 每当点击开关，把最新的开关状态同步到store中
                console.log(commodityId+"---"+selected)
                this.$http.post("front/car/" + this.userId + "/goods/" + commodityId +"/selected",{ selected: selected},{emulateJSON: true}).then(result => {
                    if (result.body.code === 1) {
                        Toast('状态更改成功');
                        this.$store.commit('setAllCount');
                        this.$store.commit('setAllAmount')
                    }else{
                        Toast('与服务器断开连接')
                    }
                })
            }
        },
        components: {
            numbox
        }
    }
</script>

<style lang="scss" scoped>
    .shopcar-container {
        background-color: #eee;
        overflow: hidden; // 撑开组件

        .goods-list {
            .mui-card-content-inner {
                display: flex;
                align-items: center;
            }

            img {
                width: 60px;
                height: 60px;
            }

            h1 {
                font-size: 14px;
            }

            .info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .price {
                    color: red;
                }
            }
        }
        .jiesuan{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .red{
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
</style>